<template>
	<div class="echart" ref="myChartRef">
		<div :id="`${myChartId}-bar`" class="echart-bar"></div>
		<echart-bar-control :id="`${myChartId}-bar-control`" class="echart-bar-control" 
			:app="myChartApp"
			@change="handleChange"
		></echart-bar-control>
	</div>
</template>
  
<script setup>
import { ref, watch, nextTick, onMounted } from 'vue';
import * as echarts from 'echarts';
import { useEventListener } from '/@/jqkit/jqkComposables/useEvent'
import { debounce } from 'lodash';

import { app } from '/@/jqkit/jqkECharts/echartBarApp.js'
import EchartBarControl from '/@/jqkit/jqkECharts/echartBarControl.vue';

const props = defineProps({
	dataSource: {
		type: Object,
		default: null,
	},
});

const title = ref('');
const xAxisData = ref([]);
const yAxisData = ref([]);
const myChartRef = ref(null);
const myChartApp = ref(app);
let myChartId = ref("");
let myChart = null;
let timer = null;

onMounted(() => {
	if (myChartRef.value) {
		myChartId.value = myChartRef.value.id;
	}
});

const handleChange = (app) => {
	const labelOption = {
		rotate: app.config.rotate,
		align: app.config.align,
		verticalAlign: app.config.verticalAlign,
		position: app.config.position,
		distance: app.config.distance
	};
	const series = yAxisData.value.map(() => ({ label: labelOption }));;
	myChart.setOption({ series: series });
};

const handleDataSource = (obj) => {
	if (!obj) return;
	// console.log("当前组件接收数据源为：", obj);
	
	title.value = obj.title || '';
	xAxisData.value = obj.xAxisData || [];
	yAxisData.value = obj.yAxisData || [];

	nextTick(() => {
		initChart();
		resizeChart();
	});
};

// 监听 props.dataSource 的变化
watch(() => props.dataSource, (newVal) => {
	handleDataSource(newVal);
}, { immediate: true,  deep: true });


// 获取 series 数据
const getSeries = (yAxisData) => {
	const labelOption = {
		show: true,
		position: myChartApp.value.config.position,
		distance: myChartApp.value.config.distance,
		align: myChartApp.value.config.align,
		verticalAlign: myChartApp.value.config.verticalAlign,
		rotate: myChartApp.value.config.rotate,
		formatter: '{c}  {name|{a}}',
		fontSize: 16,
		rich: {
			name: {}
		}
	};
	return yAxisData.map(item => ({
		name: item.name || '',
		type: 'bar',
		barGap: 0,
		label: labelOption,
		emphasis: { 
			focus: 'series' 
		},
		data: item.data || [],
	}));
};
	
// 获取 echart 配置项
const getOption = () => {
	return {
		title: {
			text: title.value
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: yAxisData.value.map(item => item.name)
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			left: 'right',
			top: 'center',
			feature: {
			mark: { show: true },
			dataView: { show: true, readOnly: false },
			magicType: { show: true, type: ['line', 'bar', 'stack'] },
			restore: { show: true },
			saveAsImage: { show: true }
			}
		},
		xAxis: [{
			type: 'category',
			axisTick: { show: false },
			data: xAxisData.value
		}],
		yAxis: [{ type: 'value' }],
		series: getSeries(yAxisData.value),
	};
};

// 初始化 echart 图表
const initChart = () => {
	if (!myChartRef.value) return;

	const chartDom = document.getElementById(`${myChartRef.value.id}-bar`);
	if (!chartDom) return;

	echarts.dispose(chartDom);
	myChart = echarts.init(chartDom);
	const option = getOption();
	option && myChart.setOption(option);
};
		
// 重置 echart 尺寸
const resizeChart = debounce(() => {
	if (myChart) myChart.resize();
}, 200);
useEventListener(window, 'resize', resizeChart)
</script>
  
<style scoped lang="scss">
.echart {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #fff;
	.echart-bar {
		width: 100%; 
		height: 100%; 
		z-index: 999;
	}
	.echart-bar-control {
		position: absolute;
		right: 5px;
		top: 5px;
		width: 240px;
		z-index: 1000;
	}
}
</style>